// sass --style compact play-weixin-style.scss play-weixin-style.css
// sass --style compressed play-weixin-style.scss play-weixin-style.css
// sass --watch play-weixin-style.scss:play-weixin-style.css

$font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size: 14px;
$font-size-lg: 18px;
$font-size-hg: 36px;
$color-black: #222222;
$color-white: #ffffff;
$color-gray: #999999;
$color-red: #d9534f;
$color-green: #5cb85c;
$color-blue: #428bca;

@mixin transition($prop: all, $duration: 400ms, $timing: linear) {
	transition: $prop $duration $timing;
		-webkit-transition: $prop $duration $timing;
		-moz-transition: $prop $duration $timing;
		-ms-transition: $prop $duration $timing;
		-o-transition: $prop $duration $timing;
}

/* element style */
body {
	background-color: $color-white;
	font-size: $font-size;
	font-family: $font-family;
	color: $color-black;
}
a,
button {
	@include transition();
}

/* common style */
.form-wx {
	.form-group {
		&:last-child {
			margin-bottom: 0;
		}
	}
	strong {
		color: $color-red;
		&:after {
			content: ' ';
		}
	}
	.row {
		margin-right: -5px;
		margin-left: -5px;
		[class^=col-] {
			padding-right: 5px;
			padding-left: 5px;
		}
	}
	[class^=col-] {
		.help-block:last-child {
			margin-bottom: 0;
		}
	}
}
.help-wx {
	color: $color-blue;
}
.center-wx {
	text-align: center;
}
.right-wx {
	text-align: right;
}
.clearfix {
	&:before,
	&:after {
		display: table;
		content: " ";
	}
	&:after {
		clear: both;
	}
}
.single-btn {
	margin-top: -10px;
	margin-bottom: 20px;
	text-align: right;
	&.top {
		margin-top: 0;
		margin-bottom: 10px;
		text-align: left;
	}
}
.color-red {
	color: $color-red;
}
.items-wx {
	> .item-wx {
		display: inline-block;
	}
	> .item-wx + .item-wx:before {
		content: '| ';
		padding: 0 5px;
		color: $color-gray;
	}
}
.label-wx {
	margin-right: 5px;
}
.alert-wx {
	@include transition();
	position: fixed;
	top: -31px;
	left: 50%;
	opacity: 0;
	border: 1px solid $color-gray;
	border-top: 0;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
	p {
		line-height: 30px;
		margin-bottom: 0;
		padding-right: 10px;
		padding-left: 10px;
		text-shadow: 0 1px 0 rgba(255,255,255,.2);
	}
	&.alert-wx-success {
		background-color: #dff0d8;
		background-image: linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);
		border-color: #b2dba1;
		color: #3c763d;
	}
	&.alert-wx-info {
		background-color: #d9edf7;
		background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
		border-color: #9acfea;
		color: #31708f;
	}
	&.alert-wx-warning {
		background-color: #fcf8e3;
		background-image: linear-gradient(to bottom,#fcf8e3 0,#f8efc0 100%);
		border-color: #f5e79e;
		color: #8a6d3b;
	}
	&.alert-wx-danger {
		background-color: #f2dede;
		background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
		border-color: #dca7a7;
		color: #a94442;
	}
	&.alert-wx-show {
		top: 0;
		opacity: 1;
	}
}


/* bootstrap override style */
.row {
	margin-right: -10px;
	margin-left: -10px;
}
[class^=col-] {
	padding-right: 10px;
	padding-left: 10px;
}
.pagination {
	margin-top: -10px;
}
.nav-tabs {
	margin-bottom: 20px;
}
.panel-tab {
	margin-top: -20px;
	border-top: 0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
.popover {
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	font-family: $font-family;
}
.radio {
	label {
		margin-right: 20px;
	}
}
.thumbnail-wx {
	display: inline-block;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 0;
}
.thumbnail-wx-h200 {
	@extend .thumbnail-wx;
	max-width: 100%;
	max-height: 200px;
}

/* angular animation style */
.fade-animate.ng-enter,
.fade-animate.ng-leave,
.fade-animate.ng-hide,
.fade-animate.ng-hide-add,
.fade-animate.ng-hide-remove {
	@include transition();
	position: relative;
	display: block;
}
.fade-animate.ng-leave.ng-leave-active,
.fade-animate.ng-enter,
.fade-animate.ng-hide-add.ng-hide-add-active,
.fade-animate.ng-hide-remove {
	transform: scale(1.05, 1.05);
		-webkit-transition: scale(1.05, 1.05);
		-moz-transition: scale(1.05, 1.05);
		-ms-transition: scale(1.05, 1.05);
		-o-transition: scale(1.05, 1.05);
	opacity: 0;
}
.fade-animate.ng-enter.ng-enter-active,
.fade-animate.ng-leave,
.fade-animate.ng-hide-remove.ng-hide-remove-active,
.fade-animate.ng-hide-add {
	transform: scale(1, 1);
		-webkit-transition: scale(1, 1);
		-moz-transition: scale(1, 1);
		-ms-transition: scale(1, 1);
		-o-transition: scale(1, 1);
	opacity: 1;
}

/* application style */
.menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 200px;
	background-color: $color-black;
	background-image: linear-gradient(to right,lighten($color-black, 10%) 0,$color-black 100%);
	box-shadow: 1px 0 10px rgba(0,0,0,.75);
	border-right: 1px solid $color-black;
	z-index: 99;
	h1 {
		margin-bottom: 20px;
		padding-right: 30px;
		text-align: right;
		text-shadow: 1px 1px 1px rgba(0,0,0,.25);
		font-weight: bold;
		color: $color-green;
	}
	ul.root {
		margin: 0;
		padding: 0;
		list-style-type: none;
		> li {
			border-bottom: 1px solid $color-black;
			> a {
				display: block;
				line-height: 50px;
				padding-right: 30px;
				border-top: 1px solid lighten($color-black, 10%);
				text-align: right;
				font-size: $font-size-lg;
				color: $color-white;
				&:hover {
					background-color: $color-black;
					background-image: none;
					text-decoration: none;
				}
			}
			> ul.node {
				margin: 0;
				padding: 0;
				list-style-type: none;
				background-color: lighten($color-black, 10%);
				> li {
					border-top: none;
					> a {
						display: block;
						line-height: 30px;
						padding-right: 30px;
						border-top: 1px solid lighten($color-black, 15%);
						text-align: right;
						font-size: $font-size;
						color: $color-white;
						&:hover {
							background-color: $color-black;
							background-image: none;
							text-decoration: none;
						}
					}
				}
			}
			&:first-child {
				border-top: 1px solid $color-black;
			}
			&:last-child {
				border-bottom: 1px solid lighten($color-black, 10%);
				> a {
					border-bottom: 1px solid $color-black;
				}
			}
		}
		> li.active {
			> a {
				background-color: $color-black;
				background-image: none;
				text-decoration: none;
			}
		}
	}
}

.body {
	position: absolute;
	top: 0;
	right: 0;
	left: 200px;
	bottom: 0;
	.wrap {
		padding: 20px;
	}
}

.article {
	margin-bottom: 20px;
	.wrap {
		padding: 10px;
		box-shadow: 0 1px 2px rgba(0,0,0,.075);
		border: 1px solid #dddddd;
		border-radius: 4px;
		.main {
			.title {
				font-size: 16px;
			}
			.time {
				font-size: 12px;
				color: $color-gray;
			}
			.img {
				max-height: 150px;
				overflow: hidden;
				&.auto {
					max-height: none;
				}
				img {
					width: 100%;
				}
			}
			p {
				margin-bottom: 5px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		.ops {
			margin-top: 10px;
			margin-right: -10px;
			margin-left: -10px;
			margin-bottom: -10px;
			background-color: lighten($color-gray, 35%);
			border-top: 1px solid lighten($color-gray, 30%);
			border-bottom-right-radius: 4px;
			border-bottom-left-radius: 4px;
			> a {
				display: table-cell;
				width: 1%;
				line-height: 30px;
				text-align: center;
			}
			> a + a {
				border-left: 1px solid lighten($color-gray, 30%);
			}
		}
	}
	&.active,
	&:hover {
		.wrap {
			border: 1px solid $color-green;
			cursor: pointer;
		}
	}
	&.active {
		.wrap {
			border-width: 5px;
		}
	}
	&.single {
		margin-top: 5px;
		margin-bottom: 0;
		max-width: 300px;
	}
	&.multi {
		.main {
			position: relative;
			.title {
				position: absolute;
				right: 0;
				left: 0;
				bottom: 0;
				margin-bottom: 0;
				padding: 10px;
				background-color: rgba(0,0,0,.6);
				color: $color-white;
			}
			.img {
				max-height: 150px;
				overflow: hidden;
				img {
					width: 100%;
				}
			}
		}
		ul {
			margin-top: 10px;
			margin-right: 0;
			margin-left: 0;
			margin-bottom: 0;
			padding: 0;
			list-style-type: none;
			> li {
				@extend .clearfix;
				padding-top: 10px;
				padding-bottom: 10px;
				border-top: 1px solid lighten($color-gray, 30%);
				.img {
					clear: none;
					float: right;
					height: 60px;
					margin-left: 10px;
					margin-bottom: 0;
					overflow: hidden;
					img {
						width: 60px;
					}
				}
				span {
					display: block;
					clear: none;
					float: right;
					line-height: 30px;
				}
				&:last-child {
					margin-bottom: -10px;
				}
			}
		}
	}
}
.article-list {
	.article {
		margin-bottom: 10px;
		.wrap {
			ul {
				margin-top: 0;
				> li {
					padding-top: 0;
					border: 0;
					.img,
					span {
						float: left;
						height: 60px;
						margin-right: 10px;
						margin-left: 0;
					}
					.img {
						img {
							width: 60px;
						}
					}
					a {
						display: block;
						clear: none;
						float: right;
						line-height: 60px;
						margin-left: 10px;
					}
				}	
			}
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
}

.navbar-menu {
	.fa-pencil-square-o {
		&:hover {
			color: $color-blue;
		}
	}
	.fa-minus-square-o {
		&:hover {
			color: $color-red;
		}
	}
}

/* ui style */
.upload-image {
	display: block;
	margin-bottom: 20px;
	padding-top: 40px;
	padding-bottom: 40px;
	border: 2px dotted $color-gray;
	border-radius: 4px;
	text-align: center;
	font-size: $font-size-hg;
}

.waterfall {
	@extend .clearfix;
	margin-right: -10px;
	margin-left: -10px;
	.waterfall-lane {
		clear: none;
		float: left;
		padding-right: 10px;
		padding-left: 10px;
	}
}
